{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/subclassing /","result":{"data":{"site":{"siteMetadata":{"title":"Heaeun","author":"Heaeun","siteUrl":"https://yoonhe.github.io","comment":{"disqusShortName":"yoonhe","utterances":"yoonhe/yoonhe.github.io"},"sponsor":{"buyMeACoffeeId":"yoonhe"}}},"markdownRemark":{"id":"14a9d5f2-3b25-5e20-b21c-05df3d6dd2b6","excerpt":"Subclassing 객체 지향 프로그래밍(OOP)의 Polymorphism과, Inheritance의 개념을 이해하는 것이 중요 Prototype Chain Student에서 Human의 Prototype에 있는 sleep 메소드를 사용하려면? 잘못된 방법 - 1 ✍ 는 참조하는 용도로만 사용해야 한다. 잘못된 방법 - 2 ✍ Student의 prototype에 Human의 prototype을 참조하는 것이기 때문에 아래와 같은 문제가 발생한다. Student의 원래 prototype…","html":"

Subclassing

\n

객체 지향 프로그래밍(OOP)의 Polymorphism과, Inheritance의 개념을 이해하는 것이 중요

\n

Prototype Chain

\n

Student에서 Human의 Prototype에 있는 sleep 메소드를 사용하려면?

\n

잘못된 방법 - 1

\n

✍ john.__proto__ = Human.prototype;

\n
function Human() {}\nHuman.prototype.sleep = function() {\n  console.log('zzz');\n}\nfunction Student() {}\nStudent.prototype.learn = function() {\n  console.log('런코')\n}\nlet john = new Student();\n\njohn.__proto__ = Human.prototype;
\n

__proto__는 참조하는 용도로만 사용해야 한다.

\n

잘못된 방법 - 2

\n

✍ Student.prototype = Human.prototype

\n
function Human() {}\nHuman.prototype.sleep = function() {\n  console.log('zzz');\n}\nfunction Student() {}\nStudent.prototype.learn = function() {\n  console.log('런코')\n}\n\nStudent.prototype = Human.prototype\nlet john = new Student();\nStudent.prototype.learn = function() {}\n// Human.prototype.learn = function() {}을 해주는 것과 같다.
\n

Student의 prototype에 Human의 prototype을 참조하는 것이기 때문에 아래와 같은 문제가 발생한다.

\n
    \n
  1. Student의 원래 prototype에 있던 sleep 메소드가 사라진다.
    2. \n
  2. 이문제를 해결하기 위해 Student의 prototype에 다시 learn 메소드를 추가하면
    3. \n
  3. 현재 Student의 prototype은 Human의 prototype의 주소값을 참조한 것이기 때문에 Human에도 learn 메소드가 생겨버린다..!
    4. \n
\n

\"image.png\"

\n

같은 모양을 가졌지만 다른 reference를 가진 객체를 어떻게 하면 만들수 있을까?

\n

좋은 방법

\n

✍ Student.prototype = Object.create(Human.prototype);

\n
\n\n
\n
let Human = function(name) {\n  this.name = name;\n}\n\nHuman.prototype.sleep = function() {\n  console.log('zzz');\n}\t\n\nlet Student = function(name) {\n  // this.name => new키워드를 사용해 만든 객체의 this는 instance가 되는데 그 instance를 가리키는 this가 human까지 연결이 안되기 때문에 human의 this가 undefined가 된다.\n  Human.call(this, name); // Human.apply(this, arguments);\n}\n\nStudent.prototype = Object.create(Human.prototype);\nStudent.prototype.constructor = Student;\n// Human.prototype을 프로토타입으로 갖는 새 객체를 만들어 Student.prototype에 넣어주었기 때문에 constructor도 Human을 바라보고 있어서 변경해줄 필요가 있다.\nStudent.prototype.learn = function() {console.log('learn coding')}\n\nlet daeun = new Student('daeun');\ndaeun.learn(); // learn coding\ndaeun.sleep(); // zzz
\n

\"image.png\"

\n

class keyword 사용

\n

prototype을 사용하는 것보다 class keyword를 사용하는 것이 더 간단하다.

\n
class Human {\n  constructor(name) {\n    this.name = name\n  }\n  sleep() {console.log('zzzz')};\n}\n\nclass Student extends Human {\n  constructor(name) {\n    super(name)\n  } // 상속을 받아온 Class와 constructor 구조가 같다면 상속 받은 Class에서 생략가능하다.\n  learn() {console.log('learn coding')};\n}\n\nlet heaeun = new Student('heaeun');\nheaeun.sleep(); // zzzz\nheaeun.learn(); // learn coding
\n

\"image.png\"

\n

객체지향 다형성 - Polymorphism

\n

메소드 확장

\n
function Human(name) {\n  this.name;\n}\n\nHuman.prototype.sleep = function() {console.log('zzzz')}\n\nfunction Student(name) {\n  Human.apply(this, arguments);\n}\n\nStudent.prototype.sleep = function() {\n   Human.prototype.sleep.apply(this); \n   console.log('자면안되요!');\n}\n\nlet heaeun = new Student('heaeun');\nheaeun.sleep();\n// zzzz\n// 자면안되요!
\n

class version

\n
class Human {\n  constructor(name) {\n    this.name = name;\n  }\n\n  sleep() {console.log('zzz')}\n}\n\nclass Student extends Human {\n  sleep() {\n    super.sleep() + console.log('자면안되!!!') \n  }\n}\nlet heaeun = new Student('heaeun');\n\nheaeun.sleep();\n// 자면안되!!!\n// zzz
\n

Subclassing

\n

객체 지향 프로그래밍(OOP)의 Polymorphism과, Inheritance의 개념을 이해하는 것이 중요

\n

Prototype Chain

\n

Student에서 Human의 Prototype에 있는 sleep 메소드를 사용하려면?

\n

잘못된 방법 - 1

\n

✍ john.proto = Human.prototype;

\n
function Human() {}\nHuman.prototype.sleep = function() {\n  console.log('zzz');\n}\nfunction Student() {}\nStudent.prototype.learn = function() {\n  console.log('런코')\n}\nlet john = new Student();\n\njohn.__proto__ = Human.prototype;
\n

__proto__는 참조하는 용도로만 사용해야 한다.

\n

잘못된 방법 - 2

\n

✍ Student.prototype = Human.prototype

\n
function Human() {}\nHuman.prototype.sleep = function() {\n  console.log('zzz');\n}\nfunction Student() {}\nStudent.prototype.learn = function() {\n  console.log('런코')\n}\n\nStudent.prototype = Human.prototype\nlet john = new Student();\nStudent.prototype.learn = function() {}\n// Human.prototype.learn = function() {}을 해주는 것과 같다.
\n

Student의 prototype에 Human의 prototype을 참조하는 것이기 때문에 아래와 같은 문제가 발생한다.

\n
    \n
  1. Student의 원래 prototype에 있던 sleep 메소드가 사라진다.
    2. \n
  2. 이문제를 해결하기 위해 Student의 prototype에 다시 learn 메소드를 추가하면
    3. \n
  3. 현재 Student의 prototype은 Human의 prototype의 주소값을 참조한 것이기 때문에 Human에도 learn 메소드가 생겨버린다..!
    4. \n
\n

\"image.png\"

\n

같은 모양을 가졌지만 다른 reference를 가진 객체를 어떻게 하면 만들수 있을까?

\n

좋은 방법

\n

✍ Student.prototype = Object.create(Human.prototype);

\n
\n\n
\n
let Human = function(name) {\n  this.name = name;\n}\n\nHuman.prototype.sleep = function() {\n  console.log('zzz');\n}\t\n\nlet Student = function(name) {\n  // this.name => new키워드를 사용해 만든 객체의 this는 instance가 되는데 그 instance를 가리키는 this가 human까지 연결이 안되기 때문에 human의 this가 undefined가 된다.\n  Human.call(this, name); // Human.apply(this, arguments);\n}\n\nStudent.prototype = Object.create(Human.prototype);\nStudent.prototype.constructor = Student;\n// Human.prototype을 프로토타입으로 갖는 새 객체를 만들어 Student.prototype에 넣어주었기 때문에 constructor도 Human을 바라보고 있어서 변경해줄 필요가 있다.\nStudent.prototype.learn = function() {console.log('learn coding')}\n\nlet daeun = new Student('daeun');\ndaeun.learn(); // learn coding\ndaeun.sleep(); // zzz
\n

\"image.png\"

\n

class keyword 사용

\n

prototype을 사용하는 것보다 class keyword를 사용하는 것이 더 간단하다.

\n
class Human {\n  constructor(name) {\n    this.name = name\n  }\n  sleep() {console.log('zzzz')};\n}\n\nclass Student extends Human {\n  constructor(name) {\n    super(name)\n  } // 상속을 받아온 Class와 constructor 구조가 같다면 상속 받은 Class에서 생략가능하다.\n  learn() {console.log('learn coding')};\n}\n\nlet heaeun = new Student('heaeun');\nheaeun.sleep(); // zzzz\nheaeun.learn(); // learn coding
\n

\"image.png\"

\n

객체지향 다형성 - Polymorphism

\n

메소드 확장

\n
function Human(name) {\n  this.name;\n}\n\nHuman.prototype.sleep = function() {console.log('zzzz')}\n\nfunction Student(name) {\n  Human.apply(this, arguments);\n}\n\nStudent.prototype.sleep = function() {\n   Human.prototype.sleep.apply(this); \n   console.log('자면안되요!');\n}\n\nlet heaeun = new Student('heaeun');\nheaeun.sleep();\n// zzzz\n// 자면안되요!
\n

class version

\n
class Human {\n  constructor(name) {\n    this.name = name;\n  }\n\n  sleep() {console.log('zzz')}\n}\n\nclass Student extends Human {\n  sleep() {\n    super.sleep() + console.log('자면안되!!!') \n  }\n}\nlet heaeun = new Student('heaeun');\n\nheaeun.sleep();\n// 자면안되!!!\n// zzz
\n

💁‍♀️ Prototype 참고 블로그

\n

참고블로그 - 1\n참고블로그 - 2\nMDN - super

","frontmatter":{"title":"Subclassing","date":"December 20, 2019"}}},"pageContext":{"slug":"/javascript/subclassing /","previous":{"fields":{"slug":"/til/20191220TIL/"},"frontmatter":{"title":"2019-12-20","category":"til","draft":false}},"next":{"fields":{"slug":"/til/20191223TIL/"},"frontmatter":{"title":"2019-12-23","category":"til","draft":false}}}},"staticQueryHashes":["2486386679","3128451518"]}